<template>
  <div class="login">
    <img src="../assets/login_top.jpg" width="200" height="100"/>
    <el-form ref="form" :model="form" :rules="rules" class="login_form">
      <el-form-item style="height: 56px">
        <el-alert
          :title="errorTip.title"
          type="error"
          show-icon
          :closable="false" v-show="errorTip.show">
        </el-alert>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="imgCode">
        <el-input v-model="form.imgCode" placeholder="输入图形验证码" style="width: 300px;float: left">
          <template slot="prepend"><img class="code_img" :src="codeUrl" @click="changeCode()" title="看不清点击刷新"/>
          </template>
        </el-input>
        <el-button type="primary" @click="sendMsgCode()">获取短信验证码</el-button>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="form.code" placeholder="输入手机验证码"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" type="password" placeholder="输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login_btn" @click="submitLoginForm()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";
  import { getBasePath, post, formRules } from "../util/util";
  import uuidv4 from "../../node_modules/uuid/v4";

  export default {
    components: {ElFormItem},
    name: "Login",
    data () {
      return {
        errorTip: {
          title: "xxxxx",
          show: false
        },
        clientId: Math.random() + "_" + uuidv4(),
        codeUrl: getBasePath() + "/admin/captcha.do?r=" + this.clientId,
        form: {
          mobile: "",
          code: "",
          password: "",
          imgCode: ""
        },
        rules: formRules(["mobile", "code", "imgCode", "password"])
      };
    },
    methods: {
      submitLoginForm () {
        let that = this;
        post("/admin/login.do", {
          mobile: that.form.mobile,
          checkNum: that.form.code,
          pwd: that.form.password
        }).then(function (data) {
          if (data.data.success) {
            let token = data.data.data.tk;
            localStorage.setItem("tk", token);
            window.location.href = "#/admin/user/list";
          } else {
            that.errorTip.title = data.data.errorMsg;
            that.errorTip.show = true;
            that.changeCode();
          }
        });
      },
      changeCode () {
        this.codeUrl = getBasePath() + "/admin/captcha.do?r=" + this.clientId + "&mp=" + Math.random();
        return true;
      },
      sendMsgCode () {
        let fm = this.$refs.form;
        let that = this;
        fm.validateField("mobile", function (error) {
          if (!error) {
            fm.validateField("imgCode", function (error2) {
              if (!error2) {
                post("/admin/sendLoginCode.do", {
                  mobile: that.form.mobile,
                  code: that.form.imgCode,
                  r: that.clientId
                }).then(function (data) {
                  if (data.data.success) {
                    that.errorTip.show = false;
                    that.$alert("验证码已发送,请注意查收", {});
                  } else {
                    that.errorTip.title = data.data.errorMsg;
                    that.errorTip.show = true;
                    that.changeCode();
                  }
                }).catch(function (errorObj) {
                  that.errorTip.title = errorObj;
                  that.errorTip.show = true;
                });
              }
            });
          }
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    width: 600px;
    height: 550px;
    border: #ff4d1c solid 1px;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 200px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .login_form {
    margin: 0 auto;
    width: 500px;
    padding-top: 50px;
  }

  .mobile_item {
    width: 240px;
    float: left;
  }

  .code_img {
    width: 100px;
    float: left;
    cursor: pointer;
  }

  .login_btn {
    width: 350px;
  }
</style>
